 <template>
  <div class="localtypePage">
     <div class="head">
      <div class="addBox">
        <button class="addButton"  @click="dialogVisible = true">添加地域</button>
        <el-dialog
            title="添加分类"
            :visible.sync="dialogVisible"
            width="30%"
            center>
            <form @submit.prevent="addLocal">
            <div class="content">
                    <div class="items">
                      <span>地域编号&nbsp;:</span>
                      <input type="text" v-model="classificationCode" required>
                    </div>
                    <div class="items">
                      <span>地域名称&nbsp;:</span>
                      <input type="text" v-model="label" required>
                    </div>
          </div>
            <span slot="footer" class="dialog-footer">
              <button type="reset" class="cancel" @click="dialogVisible = false">取消</button>
              <button type="submit" class="addLocal">添加</button>
            </span>
          </form>
          </el-dialog>
      </div>
        <div class="filter_input">
            <input type="text" v-model="searchName" placeholder="请输入地域类型查找" @keyup.enter="handleEnterKey">
            <button class="filter_button" @click="filterType" >查找</button>
        </div>
      </div>
    <div class="table_box" ref="table_box" @click="ScrollList($event)">
        <div class="table_title">
            <div class="table_title_info">编号</div>
            <div class="table_title_info">地域名称</div>
        </div>
        <div class="table_item" 
             ref="table_item"
             @mouseenter="enterTable(index)"
             @mouseleave="leaveTable(index)" 
            v-for="(item,index) in localtypeData" 
            :key="index">
        <div class="table" ref="table">
            <div class="table_info">{{ item.classificationCode }}</div>
            <div class="table_info">{{ item.label }}</div>
        </div>
        <button class="delButton" ref="delButton" @click="deleteConfirm(item)">删除</button>
      </div>
      <div v-if="flag" class="empty">
          暂无地域分类信息
   </div>
    </div>
  </div>
</template>
<script>
import {deleteLocalType,findLocalByName,addLocalType} from "@/api/admin"
import { searchLocal } from "@/api/all";
import { Message } from 'element-ui';
import { mapState, mapMutations } from "vuex";
export default {
  name: "localtypePage",
  data(){
    return {
        dialogVisible: false,
        classificationCode:"",
        label:"",
        flag:false,
        localtypeData:[],
        searchName:"",
        isOpen:false, //判断卷轴是否被卷起
        showDelete:false //判断是否出现删除按钮
    }
  },
  mounted(){
  this.init();
},
watch:{
  localtypeData(newVal, oldVal){
      this.localtypeData=newVal
      this.flag=this.localtypeData.length===0
    }
  },
  methods:{
    ...mapMutations("sort", [
      "SET_DECADETYPE",
      "SET_GROUPTYPE",
      "SET_LOCALTYPE",
    ]),
    handleEnterKey() {
           this.filterType();
        },
    async init(){
    //获取后端地域分类数据
    await searchLocal()
        .then((res) => {
          if (res.data.code === 200) {
            this.localtypeData = res.data.data.LocalTypeList;
            this.SET_LOCALTYPE(this.localtypeData);
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },
    ScrollList(e){
      if(this.showDelete)  e.preventDefault();
      else{
      this.$refs.table_item.forEach((element,index)=>{
        if(index==0)
           this.isOpen=! this.isOpen
        if(this.isOpen){
          element.style.transform="translateX(0px)";
          this.$refs.table_box.style.overflow='visible'
        }else{
          element.style.transform="translateX(-800px)";
          this.$refs.table_box.style.overflow="hidden"
        }
      })
    }
    },
    enterTable(index){
      this.$refs.delButton[index].style.display="flex"
      this.showDelete=true
    },
    leaveTable(index){
      this.$refs.delButton[index].style.display="none"
      this.showDelete=false
    },
    
    deleteConfirm(item){
      this.$confirm('确认要删除该分类吗？记录删除后将不可恢复', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              customClass:'set_custom_class',
              closeOnClickModal: false,
              type: 'warning'
            }).then(() => {  
             this.deleteType(item);
            }).catch(() => {
              Message.info("已取消")       
            });
    },
   async deleteType(item){
    let params={
      id:item.id,
      label:item.label,
      classificationCode:item.classificationCode
    }
    await deleteLocalType(params).then((res)=>{
      if(res.data.code===200){
      window.location.reload();
     }
    }).catch((error)=>{
      console.log(error)
      })
    },
   async filterType(){
    let params={
      searchName:this.searchName
    }
    await findLocalByName(params).then((res)=>{
        if(res.data.code===200){
                this.localtypeData=res.data.data.localList
                //因为搜索出的内容数量很少，所以让卷轴伸展
                this.ScrollList()
            }
    }).catch((error)=>{
        console.log(error)
    })
    },
    async addLocal(){
      let params={
                  id:1,
                  label:this.label,
                  classificationCode:this.classificationCode,
            }
            await addLocalType(params).then(res=>{
              if(res.data.code===200){
                if(res.data.message==='Ok'){
                    Message.success("地域添加成功");
                    this.dialogVisible = false
                    window.location.reload();
                }else {
                    Message.error("该地域已存在！");
              }
              }
            }).catch(error=>{
                 console.log(error)
            });
    },

  }
};
</script>
  
<style scoped>
.localtypePage{
    background: #EBEBEB;
}
.table_box{
    display: flex;
    font-family: "STKaiti";
    font-size: 20px;
    box-sizing: border-box;
    overflow: hidden;
    width:auto;
    /* box-shadow: 5px 5px 25px #a6a6a6; */
    transition: all 4s;
    height:300px;
}
.table_box .table_title{
    font-weight: bold;
    display: flex;
    flex-direction: column ;
    height: 300px;
    min-width:60px;
    border-radius: 5px;
    background: #808080;
    box-shadow: -10px 2px 15px #7c7c7c;;
    z-index: 1;

}
.table_box .table_title .table_title_info{
    text-align:center ;
    width:60px;
    font-size: 18px;
    color: #fff;
    line-height:150px ;
    box-sizing: border-box;
    padding:2px 15px;
    border:1px solid #fff;
}
.table_box .table_title .table_title_info:nth-child(1){
  border-top-style: none;
  border-left-style: none;
  border-right-style: none;
  line-height:25px ;
  padding:12px 5px;
}
.table_box .table_title .table_title_info:nth-child(2){
  width:50px;
  border: none;
  text-align: center;
  line-height:60px ;
  margin:0px auto;
}
.table_item{
  display: flex;
  background: #fffcfc;
  margin:0px 1px;
  flex-direction: column;
  transform: translateX(-800px);
}
.table{
    display: flex;
    height:45px;
    color: #fff;
    flex-direction: column ;
}
.table_info {
    flex: 1.5;
    font-size: 20px;
    font-weight: normal;
    padding: 10px 10px;
    box-sizing: border-box;
    line-height: 30px;
    color: #333;
    min-width:50px;
  text-align: center;
}
.table_info:nth-child(1){
  border:1.5px solid #8b8a8a;
  border-top-style: none;
  border-left-style: none;
  border-right-style: none;
}
button:hover{
cursor: pointer;
}
.delButton{
  vertical-align: middle;
  width:100px;
  height:40px;
  border: 1px solid #cbcaca;
  color:#fff;
  display: none;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin-top:200px;
  border-radius: 5px;
  background:rgba(156,10,10,0.9);
}


.head{
  width:1000px;
  margin-top:50px;
  height: 70px;;
}
.addBox{
  display: inline-block;
  max-width:200px;
}
.addButton{
    color:#fff;
    width:120px;
    height:40px;
    border-radius: 5px;
    background:rgba(42,81,77, 1);
    border:1px solid #9e9d9d;
}
  .filter_input{
    display: inline-block;
    width: 600px;
    font-size: 18px;
    color:#757474;
    position: relative;
    height:50px;
    line-height: 50px;
    color:#666666;
    margin-left: 200px;
  }
  .filter_input input{
    width:280px;
    height:40px;
    padding:5px;
    border:1px solid rgba(42,81,77, 0.7);
    border-radius: 2px;
    background: #eae8e8;
    color:#535252;

  }
  .filter_button{
    color:#fff;
    width:58px;
    height:40px;
    border-radius: 3px;
    /* border-top-left-radius: 0px;
    border-bottom-left-radius: 0px; */
    background:rgba(42,81,77, 1);
    position:absolute;
    top:8px;
    left:278px;
    border:1px solid #9e9d9d;
  }
  
  .content{
    display: flex;
    flex-direction: column;
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
    width:300px ;
    height:280px;
    margin: 0px auto;
  }
  .items{
   width: auto;
   height:90px;
  }
  .items span{
  display:block;
  width:80px;
  text-align: left;
  color:#666666;
  font-size: 16px;
  margin-bottom: 10px;
  }
  .items input{
    height:40px;
    padding:5px;
    border:1px solid #c0c0c0;
    border-radius: 10px;
    min-width:300px;
    font-size: 16px;
    color:#666666;
    vertical-align: middle;
  }
  .cancel,
  .addLocal{
    background:  rgb(47, 91, 87);
    color: #fff;
    width:100px;
    height:35px;
    border-radius: 8px;
    margin:10px auto;
    border: 1px solid #215c3d;
    transition: all 0.3s;
  }
  .cancel:hover,
  .addLocal:hover{
    cursor: pointer;
    box-shadow: 5px 5px 15px #b0b3b1;
  }
  .dialog-footer{
    display: flex;
    justify-content: space-between;
  }
  .cancel{
    background:#fff;
    color:rgba(42,81,77, 1);
  }

  .empty{
height: 300px;
text-align: center;
line-height: 300px;
width:1000px;
color:#666666;
font-size:20px;
background: #cac8c8;
}
</style> 